<template>
	<view>
		<u-navbar :is-back="true" title="确认订单" :background="navbarBg" :border-bottom="false" ></u-navbar>
		<scroll-view class="no-scroll-bar" :scroll-x="false" :scroll-y="true" :style="'height:'+(scrollViewHeight-70)+'px;'">
		<view class="u-m-20" style="background-color: #ffffff;border-radius: 16rpx;">
			<u-cell-item title="配送方式" :label="deliveryLabel" :arrow="false">
				<view  slot="right-icon">
					<selectSwitch @change="changeSwitch" :checked_bj_color="'#F29100'"  :switchList="['自取','外卖']"/>
				</view>
			</u-cell-item>
			<u-cell-item title="联系电话"  :arrow="false">
				<view  slot="right-icon">
						<u-input v-model="mobile" type="tel" :border="false" input-align="right" placeholder="请填写联系电话"/>
				</view>
			</u-cell-item>
			<view v-if="deliveryWay">
				<u-cell-item title="取餐时间" :value="pickUpTimeObj.label" :value-style="{color:'#F29100'}"
					@click="selectPickUpTime"></u-cell-item>
				<view>
					<u-radio-group	v-model="pickUpWay"  active-color="#F29100"  @change="pickUpWayChange">
						<view  class="u-p-30 u-flex u-row-around u-col-center" style="width: 100%;">
							<u-radio   name="0">店内堂食</u-radio>
							<u-radio   name="1">打包带走</u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
			<view v-else>
				<u-cell-item title="预计送达时间" value="2小时以后" :arrow="false" hover-class="none"></u-cell-item>
			</view>
		</view>
		
		<view class="u-m-20" style="background-color: #ffffff;border-radius: 16rpx;">
			<view class="u-p-30 u-border-bottom">商品明细</view>
			<view  class="u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20 u-border-bottom">
				<view class="u-p-t-10 u-p-b-10" v-for="(good,index) in vuex_shopCarData" :key="index">
					<u-row>
						<u-col :span="6">
							<view class="u-flex u-row-left u-col-center">
								<view class="u-m-r-20">
									<u-image width="90" height="90" :src="good.path" border-radius="6rpx">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
								<view>
									<view class="u-m-b-20">{{good.goodName}}</view>
									<view class="u-m-t-20 u-line-1 u-tips-color u-font-24">{{formatSelectedAtrr(good.skuRules)}}</view>
								</view>
							</view>
						</u-col>
						<u-col :span="6">
								<view style="text-align: right;">
									<view class="u-m-b-20" style="color: #fa3534;">
										<text>¥</text><text>{{good.price}}</text>
									</view>
									<view class="u-m-t-20 u-tips-color u-font-26">
										<text>×</text> <text>{{good.count}}</text>
									</view>
								</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20 u-border-bottom">
				<u-row>
					<u-col :span="6">
						<view  style="text-align: left;">商品小计</view>
					</u-col>
					<u-col :span="6">
						<view style="text-align: right;color: #fa3534;">
							<text>¥</text><text>{{payAmount}}</text>
						</view>
					</u-col>
				</u-row>
			</view>
			<view>
				<u-cell-item icon="coupon-fill" :icon-style="{color:'#F29100'}" title="优惠券" :value="'暂无可用'" :value-style="myCouponList.length<1?unUsedCouponStyle:''"
					@click="selectCoupon"></u-cell-item>
			</view>
			<view class="u-p-l-24 u-p-r-30 u-p-t-20 u-p-b-20 u-border-bottom">
				<u-row>
					<u-col :span="4">
						<view  style="text-align: left;">
							<u-icon :margin-right="10" :margin-left="10" size="32" name="question-circle-fill" color="#F29100" label-color="#909399"  label="费用说明"></u-icon>
						</view>
					</u-col>
					<u-col :span="8">
						<view style="text-align: right;font-weight: bold;">
							<text>共{{totalCount}}件商品</text>
							<text style="margin: 0rpx 20rpx;">小计</text>
							<text style="font-size: 32rpx;">¥</text>
							<text style="font-size: 32rpx;">{{payAmount}}</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>	
		
		
		<view class="u-m-20"  style="background-color: #ffffff;border-radius: 16rpx;">
			<view class="u-p-30 u-border-bottom">选择支付方式</view>
			<view class="u-m-t-30">
				<u-radio-group v-model="payWay"   @change="payWayChange">
					<view 	class="u-flex u-row-between u-col-center u-p-l-30 u-m-b-30">
						<view class="u-flex u-row-left u-col-center">
							<view  class="u-m-r-20">
								 <u-icon name="rmb-circle-fill" :size="40" color="#2979ff"></u-icon>
							</view>
							<view class="u-p-b-6">
								<text>余额支付</text>
								<text class="u-tips-color u-font-24">(可用¥:{{Number(vuex_userInfo.accountBalance).toFixed(2)}})</text>
							</view>
						</view>
						<view>
							<u-radio name="0" :disabled="balanceWayDisabled" label-size="24rpx" active-color="#2979ff">
								<text class="u-tips-color" v-if="balanceWayDisabled">余额不足</text>
							</u-radio>
						</view>
					</view>
					<view  class="u-flex u-row-between u-col-center u-p-l-30 u-m-b-30">
						<view class="u-flex u-row-left u-col-center">
							<view class="u-m-r-20">
								 <u-icon name="weixin-circle-fill"  :size="40" color="#19be6b"></u-icon>
							</view>
							<view  class="u-p-b-6">
								<text>微信支付</text>
							</view>
						</view>
						<view>
							<u-radio name="1" active-color="#19be6b"></u-radio>
						</view>
					</view>
				</u-radio-group>
			</view>
		</view>
		
		<view   class="u-m-20 u-flex u-row-between u-col-center" style="background-color: #ffffff;border-radius: 16rpx;margin-bottom: 0rpx;">
			<view class="u-m-l-40 u-main-color u-font-28">
				<text>备注</text>
			</view>
			<view class="u-m-r-20" style="width: 80%;">
					<u-input v-model="orderRemark" type="text" :border="false" input-align="right" placeholder="我要留言"/>
			</view>
		</view>
		
		
		
		</scroll-view>
		<view   class="u-flex u-row-between u-col-center submit-box"  :style="'height:'+footerHeight+'px'">
				<view class="u-p-l-30">
					<view>
						<text style="font-size: 30rpx;margin-right: 10rpx;">合计</text>
						<text style="font-size: 32rpx;font-weight: bold;">¥{{Number(payAmount).toFixed(2)}}</text>
					</view>
				</view>
				<view class="u-p-r-30">
					<u-button @click="submitOrder" type="warning">立即支付</u-button>
				</view>
		</view>
		<!-- 支付密码 -->
		<u-popup v-model="passwordPopFlag" mode="bottom" border-radius="14" length="70%"
				:mask-close-able="false">
				<view class="u-p-30">
					<view>
						<view class="u-flex u-row-between">
							<view style="width: 100rpx;" @click="closePwdPop">
								<u-icon name="close"></u-icon>
							</view>
							<view v-if="pwdErrorTips.length>0" 
								style="text-align: center;color: #FC5531;font-size: 34rpx">
								{{pwdErrorTips}}
							</view>
							<view v-else style="text-align: center;font-weight: bold;font-size: 32rpx;">
								<text>请输入支付密码</text>
							</view>
							<view style="width: 100rpx;">
								<text></text>
							</view>
						</view>
					</view>
					<view class="u-m-t-30 u-p-b-30  u-border-bottom" style="text-align: center;font-size: 18px;">
						<view>待支付</view>
						<view style="font-weight: bold;">
							<text style="margin-right: 6rpx;">¥</text><text style="font-size: 26px;">{{Number(payAmount).toFixed(2)}}</text>
						</view>
					</view>
					<view class="u-m-t-50">
						<u-message-input :breathe="true"  :maxlength="6" :dot-fill="true"
									@change="inputChange" @finish="inputFinish" :focus="pwdFocus">
						</u-message-input>
					</view>
				</view>
		</u-popup>
		
		
		<u-select v-model="pickUpTimeShowFlag" :list="pickUpTimeList" @confirm="confirmPickUpTime"></u-select>
	</view>
</template>

<script>
	import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
	import {addNewOrder,changeOrderStatus} from "@/util/data/order.js"; 
	export default {
		components:{
			selectSwitch
		},
		data() {
			return {
				scrollViewHeight:0,
				footerHeight:0,
				deliveryLabel:'桑植新城甜诺烘焙店',
				deliveryWay:true, //true 自取  false 外卖
				mobile:'',		//电话
				pickUpTimeObj:{		//取餐时间
					value: '1',
					label: '很快取餐'
				},
				defaultPickUpTimeIndex:[0], //取餐选择时间的默认项
				pickUpTimeList:[
					{
						value: '1',
						label: '很快取餐'
					},
					{
						value: '2',
						label: '2小时以内'
					},
					{
						value: '3',
						label: '4小时以内'
					},
					{
						value: '4',
						label: '6小时以内'
					},
					{
						value: '5',
						label: '8小时以内'
					},
					{
						value: '6',
						label: '10小时以内'
					}
				],
				pickUpTimeShowFlag:false,	//取餐弹窗控制开关
				pickUpWay:"0",
				unUsedCouponStyle:{color:'#909399',fontSize:'24rpx'},//没有优惠券
				myCouponList:[],
				payWay:"0",
				balanceWayDisabled:false,
				orderRemark:'',
				passwordPopFlag:false, //支付密码弹窗
				pwdFocus:false,
				pwdErrorTips:'',
				payAmount:0.00,
				totalCount:0,
				newOrderInfo:{},
			};
		},
		onLoad:function(){
			console.log("当前购物车的数据",this.vuex_shopCarData);
			console.log("当前购物车商品数量小计",this.vuex_totalCount);
			console.log("当前购物车商品小计",this.vuex_totalPrice);
			this.payAmount=this.vuex_totalPrice;
			this.totalCount=this.vuex_totalCount;
			this.mobile=this.vuex_userInfo.mobile;
			let windowHeight=this.globalUtil.getScrollViewHeigh(this);
			this.scrollViewHeight=windowHeight*0.94;
			this.footerHeight=windowHeight*0.08;
			if(this.vuex_userInfo.accountBalance>0&&this.vuex_userInfo.accountBalance>this.vuex_totalPrice){
				this.payWay="0";
				this.balanceWayDisabled=false;
			}else{
				this.payWay="1";
				this.balanceWayDisabled=true;
			}
		},
		watch:{
			defaultAddress:function(addr){
				if(this.deliveryWay==false){
					this.deliveryLabel=addr.addressInfo;
				}
			}
		},
		methods:{
			//切换配送方式
			changeSwitch:function(isSwitch){
				this.pickUpTimeShowFlag=false;
				this.defaultPickUpTimeIndex=[0];
				this.pickUpTimeObj={
					value: '1',
					label: '很快取餐'
				};
				this.deliveryWay=isSwitch;
				if(isSwitch==false){
					this.deliveryLabel=this.defaultAddress.addressInfo;
					this.$u.route({
						url:'/pages/common/my-address/my-address',
					});
				}else{
					this.deliveryLabel="桑植新城甜诺烘焙店";
				}
			},
			//取餐方式
			pickUpWayChange:function(e){
				console.log("监听取餐方式",e);
			},
			//选择取货时间
			selectPickUpTime:function(){
				let that=this;
				that.pickUpTimeShowFlag=true;
			},
			//确认取餐时间
			confirmPickUpTime(e) {
				let that=this;
				that.pickUpTimeObj.label=e[0].label;
				that.pickUpTimeObj.value=e[0].value;
				let defaultIndex= that.pickUpTimeList.findIndex(function(item){
					return item.value=that.pickUpTimeObj.value;
				});
				if(defaultIndex!=-1){
					that.defaultPickUpTimeIndex=[defaultIndex];
				}
				console.log("确认取餐时间",that.pickUpTimeObj);
			},
			//格式化选择的规格
			formatSelectedAtrr:function(skuRules){
				let that=this;
				let selectedLabelArr=[];
				if(skuRules&&skuRules.length>0){
					for (let i = 0; i < skuRules.length; i++) {
						  let ruleObj= skuRules[i];
						  let labelArr= ruleObj.attrValues;
						  for (let j = 0; j < labelArr.length; j++) {
						    	let label= labelArr[j].tagLable;
								if(labelArr[j].selected){
									selectedLabelArr.push(label);
								}
								
						  }
					}
					return selectedLabelArr.join("/");
				}
				else{
					return "";
				}
			},
			//选择优惠券
			selectCoupon:function(){
				console.log("获取我的优惠券");
			},
			//监听支付方式变化
			payWayChange:function(e){
				console.log("监听支付方式",e);
			},
			//提交订单
			submitOrder:function(){
				let param={
					id:"TNHB_"+new Date().getTime(),
					orderCode:"TNHB_"+new Date().getTime(),
					deliveryWay:this.deliveryWay?0:1, //true 自取  false 外卖
					mobile:this.mobile,		//电话
					pickUpTime:this.pickUpTimeObj, 
					pickUpWay:this.pickUpWay,
					orderRemark:this.orderRemark,
					payAmount:this.payAmount,
					payWay:this.payWay,
					createTime:this.globalUtil.dateFormatTime(new Date(),'/','Ymd H:i:s'),
					payStatus:0,
					payCountDown:60, //支付倒计时
					goodList:this.vuex_shopCarData,
				}
				console.log("生成预订单，跳转支付",param);
				this.newOrderInfo=param;
				addNewOrder(param);
				this.clearShopCar();
				//订单生成完成以后去支付
				this.showPwdPop();
				//支付完成或者没有支付，支付完成回到点餐页面，没有支付到预支付界面
				
			},
			clearShopCar:function(){
				this.$u.vuex("vuex_shopCarData",[]);
				this.globalUtil.changeVuexStatu(this,0,0.00);
			},
			showPwdPop:function(){
				let that=this;
				this.passwordPopFlag=true;
				this.pwdErrorTips="";
				setTimeout(function(){
					that.pwdFocus=true;
				},1000)
			},
			closePwdPop:function(){
				this.pwdErrorTips="";
				this.passwordPopFlag=false;
				this.pwdFocus=false;
				//暂时不支付
				this.$u.route({
					type:'reLaunch',
					url:'/pages/tabbar/order/order',
				})
			},
			inputChange(e){
				this.pwdErrorTips="";
			},
			inputFinish(e) {
				let that=this;
				console.log('输入结束，当前值为：' + e);
				let param={
					tradePwd:e
				};
				if(e!='888888'){
					this.globalUtil.utilAlert('密码错误,还有2次机会');
					this.pwdErrorTips='支付密码错误，还有2次机会';
				}else{
					//支付完成，将刚才生成的订单状态改成待发货 1
					let flag= changeOrderStatus(this.newOrderInfo,1);
					if(flag==true){
						//完成支付的动作
						this.$u.route({
							type:'reLaunch',
							url:'/pages/tabbar/shopCar/shopCar',
						})
					}
					else{
						//支付失败回调
						this.$u.route({
							type:'reLaunch',
							url:'/pages/tabbar/order/order',
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.submit-box{
	position: absolute;
	bottom: 1px; 
	width: 100%;
	background-color: #ffffff;
	border-radius: 16rpx;
}
</style>
